<template>
  <div class="home-page">
    <div class="main">
      <!-- 2号广告位 -->
      <div class="ad-body" v-if="bodyAd" @click="openUrl(bodyAd.adLink)" :style="`backgroundImage: url(${bodyAd.adPic})`" />
      <TableList
        class="table-item"
        v-for="item in categorys.filter(c => c.list.length)"
        :key="item.code"
        :title="item.value"
        :category="item"
        :data="item.list"
      />
    </div>
    <div class="right">
      <!-- 广告位3 -->
      <Card class="card-item" v-if="ad3" :desc="ad3.adRemark" :image="ad3.adPic" :link="ad3.adLink" />
      <!-- 广告位4 -->
      <Card class="card-item padding" v-if="ad4" title="关注公众号" :desc="ad4.adRemark" :image="ad4.adPic" :link="ad4.adLink" />
      <!-- 标签 -->
      <LabelCard
        class="card-item"
        v-for="item in categorys.filter(c => c.labels.length)"
        :key="item.code"
        :title="item.value + '标签'"
        :labels="item.labels"
        :category="item"
        @change="onLabelSelect"
        v-model="item.label"
      />
    </div>
  </div>
</template>

<script>
import TableList from '../../components/TableList.vue';
import Card from '../../components/Card.vue';
import LabelCard from '../../components/LabelCard.vue';
import { getAdByType, getCategoryList, getBlog, getLabel } from '../../api/index';
import bus from '../../utils/event-bus';

export default {
  name: 'Home',
  components: { TableList, Card, LabelCard },
  data() {
    return {
      bodyAd: null,
      ad3: null,
      ad4: null,
      categorys: [],
      keyword: ''
    };
  },
  methods: {
    // 获取2号广告位
    getBodyAd() {
      getAdByType('BODY').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.bodyAd = res.data[0];
          this.bodyAd.adPic = res.data[0].adPic.split(',')[0];
          this.bodyAd.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 获取3号广告位
    getAd3() {
      getAdByType('DB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.ad3 = res.data[0];
          this.ad3.adPic = res.data[0].adPic.split(',')[0];
          this.ad3.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 获取4号广告位
    getAd4() {
      getAdByType('ZB').then(res => {
        if (res.data.length && res.data[0].adPic) {
          this.ad4 = res.data[0];
          this.ad4.adPic = res.data[0].adPic.split(',')[0];
          this.ad4.adLink = res.data[0].adLink.split(',')[0];
        }
      });
    },
    // 查询首页列表
    getAtList() {
      getCategoryList().then(res => {
        this.categorys = (res.data || []).map(item => {
          item.list = [];
          item.labels = [];
          item.label = '';
          // 查询博客
          getBlog({
            blogIndex: true,
            page: 1,
            limit: 10000,
            type: item.code,
            keyword: this.keyword
          }).then(res => {
            item.list = res.data || [];
          });
          // 查询标签
          getLabel(item.code).then(res => {
            item.labels = res.data || [];
          });
          return item;
        });
      });
    },
    // 根据标签筛选
    onLabelSelect(category, label) {
      this.$router.push({
        name: 'Blogs',
        query: {
          code: category.code,
          value: category.value
        },
        params: { label: label.tagName }
      });
      // this.labels[category] = label.tagName;
    },
    openUrl(link) {
      if (link) window.open(link);
    }
  },
  watch: {
   
  },
  mounted() {
    // 查询2号广告位
    this.getBodyAd();
    this.getAd3();
    this.getAd4();
    this.getAtList();
    bus.$on('keyword', value => {
      this.keyword = value;
      this.getAtList();
    });
  },
  beforeDestroy() {
    bus.$off('keyword');
  },
}
</script>

<style lang="scss" scoped>
.home-page {
  display: flex;
  padding: 16px 10%;
}

.main {
  flex: 1;
}

.right {
  width: 280px;
  padding-left: 16px;
}

.ad-body {
  width: 100%;
  height: 0;
  padding-top: 12.5%;
  border-radius: 5px;
  margin-bottom: 16px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.table-item, .card-item {
  margin-bottom: 16px;
}

.padding {
  padding: 0 16px;
}
</style>
